<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">/order/order
<title>平台管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="/css/plat-style.css" media="all">
<style>
thead tr th {
	text-align: center !important;
}

tr td {
	text-align: center !important;
}

</style>
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body layui-form">
						<%-- 查询条件设置 --%>
						<div class="layui-container layui-form-item" style="padding-bottom: 50px">
							<div class="layui-col-md12">
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">商家：</div>
									<div class="layui-col-sm7">
										<select name="bid">
											<option value="">请选择</option>
											<c:forEach items="${businessList}" var="b">
												<option value="${b.id}"
													${order.bid==b.id?'selected="selected"':'' }>${b.nickName}</option>
											</c:forEach>
										</select>
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">支付方式：</div>
									<div class="layui-col-sm7">
										<select name="payType">
											<option value="">请选择</option>
											<c:forEach items="${payTypeList}" var="t">
												<option value="${t.id}"
													${order.payType==t.id?'selected="selected"':'' }>${t.name}</option>
											</c:forEach>
										</select>
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">订单类型：</div>
									<div class="layui-col-sm8">
										<select name="orderType">
											<option value="">请选择</option>
											<c:forEach items="${statusList}" var="t">
												<option value="${t.id}"
													${order.orderType==t.id?'selected="selected"':'' }>${t.name}</option>
											</c:forEach>
										</select>
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">订单状态：</div>
									<div class="layui-col-sm8">
										<select name="orderStatus">
											<option value="">请选择</option>
											<c:forEach items="${statusList}" var="t">
												<option value="${t.id}">${t.name}</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-col-xs12">&nbsp;</div>
							<div class="layui-col-md12">
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">用户账号：</div>
									<div class="layui-col-sm8">
										<input class="layui-input" name="phone" autocomplete="off">
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">订单编号：</div>
									<div class="layui-col-sm7">
										<input type="text" name="orderCode" class="layui-input"
											value="${order.orderCode}">
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">交易单号：</div>
									<div class="layui-col-sm7">
										<input type="text" name="payCode" class="layui-input"
											value="${order.payCode}">
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm3" style="line-height: 38px">下单时间：</div>
									<div class="layui-col-sm8">
										<input class="layui-input" name="queryTime" id="laydate-cn"
											autocomplete="off">
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-col-sm9 layui-col-sm-offset3">
										<button class="layui-btn layuiadmin-btn-list" lay-submit
											lay-filter="LAY-app-contlist-search">查询</button>
										<button class="layui-btn layui-btn-warm exportThis"
											data-type="exportThis" type="button">导出订单</button>
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<hr>
							</div>
						</div>
						<%-- 数据展示 --%>
						<table class="layui-table" id="table" lay-filter="table">
						</table>
						<script type="text/html" id="toolbar">
							<div class="layui-btn-container">
								<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">查看订单</a>
								{{#  if(d.orderStatus >= 15 && d.orderStatus !=20 && d.orderStatus !=25){ }}
									<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="expDetail">查看物流</a>
								{{#  } }}
							</div>
						</script>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/layuiadmin/layui/layui.js"></script>
	<script src="/js/common.js"></script>
	<script>
	layui.config({
		base: '/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index','form','laydate','table'], function(){
		var $ = layui.$,layer = layui.layer,form = layui.form,
				element = layui.element,laydate=layui.laydate, table=layui.table;
		form.render('select');
		element.render();
		laydate.render({
			elem: '#laydate-cn',
			range:'~'
		});

		table.render({
			elem : '.layui-table',
			url : '/order/queryOrderList',
			where:{"logistics":0},
			page:true,
			request: {
				pageName: 'current', //页码的参数名称，默认：page
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			cols : [[ 
				{field : 'orderCode', title:'订单编号', minWidth:160},
				{field : 'orderTypeName', title:'订单类型', minWidth:160},
				{field : 'bNickName', title:'所属店铺', minWidth:160},
				{field : 'createTime', title : '创建时间', minWidth:150,
					templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm')}}</div>"
				},
				{field : 'payMoney', title : '支付金额', width:100},
				{field : 'point', title : '积分', width:70},
				{field : 'phone', title : '用户账户', width:120},
				{field : 'payTypeName', title : '支付方式', width:100},
				{field : 'orderFromChannel', title : '订单来源', width:100},
				{field : 'orderStatusName', title:'订单状态', width:130},
				{title : '操作', templet:'#toolbar'}
			]],
			skin : "row",
			even: true,
			size:"lg"
		});
		
		var active = {
			detail:function(id){
				window.location.href = "/order/orderDetail?orderId="+id;
			},
			exportThis:function(bid,orderType,payType,orderStatus,phone,orderCode,payCode,queryTime){
				window.location.href = encodeURI("/export/handleExportOrder?queryTime="+queryTime+"&payCode="+payCode+"&orderCode="+orderCode+"&phone="+phone+"&payType="+payType
						+"&payType="+payType+"&bid="+bid+"&orderType="+orderType+"&orderStatus="+orderStatus);
			},
			expDetail:function(orderCode) {
				layer.open({
                    title:'物流情况',
                    type: 2,
                    area: ['550px', '520px'],
                    content: '/order/orderExpMsg?orderCode='+orderCode
                });
			}
		};
		//导出事件触发
		$(".exportThis").on('click',function () {
			var exportThis = $(this).data('type');
			var bid = $('select[name="bid"]').find('option:selected').val();
			var orderType = $('select[name="orderType"]').find('option:selected').val();
			var payType = $('select[name="payType"]').find('option:selected').val();
			var orderStatus = $('select[name="orderStatus"]').find('option:selected').val();
			var phone = $('input[name="phone"]').val();
			var orderCode = $('input[name="orderCode"]').val();
			var payCode = $('input[name="payCode"]').val();
			var queryTime = $('input[name="queryTime"]').val();
			active[exportThis] && active[exportThis].call(this,bid,orderType,payType,orderStatus,phone,orderCode,payCode,queryTime);
		});
		
		//监听事件
		table.on('tool(table)', function(obj){
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			if (layEvent === 'detail') {// 订单详情
				active[layEvent] && active[layEvent].call(this, data.id);
			} else if (layEvent === 'expDetail') {
				active[layEvent] && active[layEvent].call(this, data.orderCode);
			}
		});
		
		//监听搜索
	    form.on('submit(LAY-app-contlist-search)', function(data){
	      var field = data.field;
	      //执行重载
	      table.reload('table', {
	        where: field
	      });
	    });

		//缓存当前操作的是哪个表格的哪个tr的哪个td
		$(document).off('mousedown', '.layui-table-grid-down').on('mousedown', '.layui-table-grid-down', function (event) {
			//直接记录td的jquery对象
			table._tableTrCurrr = $(this).closest('td');
		});

		//给弹出的详情里面的按钮添加监听级联的触发原始table的按钮的点击事件
		$(document).off('click', '.layui-table-tips-main [lay-event]').on('click', '.layui-table-tips-main [lay-event]', function (event) {
			var elem = $(this);
			var tableTrCurrr = table._tableTrCurrr;
			if (!tableTrCurrr) {
				return;
			}
			var layerIndex = elem.closest('.layui-table-tips').attr('times');
			layer.close(layerIndex);
			table._tableTrCurrr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
		});
		
	})
</script>
</body>
</html>